<template>
	<view>
		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" title="投稿详情" :autoBack="true" placeholder
			bgColor="transparent">
		</up-navbar>

		<view class="maxTitle">{{details?.title}}</view>
		<view class="details-time">{{dayjs(details?.createTime).format("YYYY.MM.DD HH:mm:ss")}}</view>
		<view class="details-main border-box">
			<view class="title">基础信息</view>
			<up-gap height="40rpx"></up-gap>
			<view class="item flex align-item_center justify-content_space-between">
				<view>地图</view>
				<view>{{details?.reason}}</view>
			</view>
			<view class="item flex align-item_center justify-content_space-between">
				<view>鱼种</view>
				<view>{{details?.fishSpecs}}</view>
			</view>
			<view class="item flex align-item_center justify-content_space-between">
				<view>坐标</view>
				<view>{{details?.coordinate}}</view>
			</view>
			<!-- <view class="item flex align-item_center justify-content_space-between">
				<view>推荐</view>
				<view>{{details?.recommend}}</view>
			</view> -->
			<view class="item flex align-item_center justify-content_space-between">
				<view>卡米</view>
				<view>{{details?.fishLike}}</view>
			</view>
			<view class="item flex align-item_center justify-content_space-between">
				<view>钓组</view>
				<view>{{details?.temperature}}</view>
			</view>
			<view class="item flex align-item_center justify-content_space-between">
				<view>渔具</view>
				<view>{{details?.fishGear}}</view>
			</view>
			<view class="item flex align-item_center justify-content_space-between">
				<view>引线</view>
				<view>{{details?.leadSize}}</view>
			</view>
			<view class="item flex align-item_center justify-content_space-between">
				<view>标签</view>
				<view>{{details?.field}}</view>
			</view>
		</view>
		<view class="details-main border-box">
			<view class="title">说明</view>
			<view class="content">{{details?.content}}</view>
		</view>
		<view class="methodTime flex align-item_center justify-content_space-between border-box">
			<view>时间</view>
			<view>{{dayjs(details?.fishTime).format("YYYY.MM.DD HH:mm:ss")}}</view>
		</view>
		<view class="details-main border-box">
			<view class="title">截图证明</view>
			<view class="show">
				<view class="show-title">鱼获收益</view>
				<up-gap height="20rpx"></up-gap>
				<view class="flex">
					<view style="margin-right: 20rpx;" v-for="(item,index) in details?.fishImg.split(',')" :key="index">
						<up-image :show-loading="true" :src="item" width="150rpx" height="150rpx" radius="16rpx"
							@click="preview(details?.fishImg.split(','))"></up-image>
					</view>
				</view>
				<view class="show-title">装备配置</view>
				<up-gap height="20rpx"></up-gap>
				<view class="flex">
					<view style="margin-right: 20rpx;" v-for="(item,index) in details?.gearImg.split(',')" :key="index">
						<up-image :show-loading="true" :src="item" width="150rpx" height="150rpx" radius="16rpx"
							@click="preview(details?.gearImg.split(','))"></up-image>
					</view>
				</view>
				<view class="show-title">坐标地图</view>
				<up-gap height="20rpx"></up-gap>
				<view class="flex">
					<view style="margin-right: 20rpx;" v-for="(item,index) in details?.coordinateImg.split(',')" :key="index">
						<up-image :show-loading="true" :src="item" width="150rpx" height="150rpx" radius="16rpx"
							@click="preview(details?.coordinateImg.split(','))"></up-image>
					</view>
				</view>
			</view>
		</view>
		<view class="review-status flex align-item_center justify-content_space-between">
			<view>评论状态</view>
			<view>{{details?.commentStatus?"可评论":"不可评论"}}</view>
		</view>
		<template v-if="details?.commentStatus">
			<view class="review border-box">
				<view class="tabs flex align-item_center">
					<view class="title">
						评论 <template v-if="reviewCount>0">（{{reviewCount}}）</template>
					</view>
				</view>
				<up-empty v-if="comment.list.length ===0 " mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
				</up-empty>
				<view class="item" v-for="item in comment.list" :key="item.id">
					<postUser :item="item" type="review" />
					<up-gap height="20rpx"></up-gap>
					<template>
						<view class="content">
							{{item.content}}
						</view>
						<up-gap height="30rpx"></up-gap>
					</template>
				</view>
			</view>
			<view class="reviewInput flex align-item_center fixed border-box">
				<image class="block chat" src="https://ryyf.wangjintech.cn/static/image/review/0.png" />
				<up-input placeholder="请输入您要评论的内容" border="none" v-model="data.content"></up-input>
				<view class="button" @click="confirmReview">评论</view>
			</view>
		</template>
		<up-back-top :scrollTop="scrollTop" :iconStyle="iconStyle" :duration="200" :bottom="80"></up-back-top>
		<up-gap height="60rpx"></up-gap>
	</view>
</template>

<script setup>
	import openApi from "@/api/biz/open.js"
	import dayjs from "dayjs"
	import {
		onLoad,
		onReachBottom,
		onPageScroll
	} from "@dcloudio/uni-app"
	import {
		msg
	} from "@/utils/tool.js"
	import postUser from "@/components/post/user.vue"
	import postIndex from "@/components/post/index.vue"
	import {
		ref,
		reactive
	} from "vue"

	onReachBottom(() => {
		if (comment.list.length >= comment.total) return;
		params.pageNo++;
		getCommentPage()
	})
	const iconStyle = {
		fontSize: '32rpx',
		color: '#2979ff'
	};
	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	function confirmReview() {
		if (!data.content.trim()) return msg("请输入评论内容")
		openApi.createComment({
			strategyId: id.value,
			toUserId: details.value.userId,
			content: data.content
		}).then(res => {
			if (res.code === 0) {
				msg("评论成功")
				data.content = ""
				getCommentPage()
				getStrategy()
			}
		})
	}

	const reviewCount = ref(0)
	const data = reactive({
		content: ""
	})


	const params = reactive({
		pageNo: 1,
		pageSize: 10
	})

	const comment = reactive({
		list: [],
		total: 0
	})

	function getCommentPage() {
		openApi.getCommentPage({
			...params,
			strategyId: id.value
		}).then(res => {
			if (res.code === 0) {
				reviewCount.value = res.data.total
				apiLogic(res)
			}
		})
	}

	function apiLogic(res) {
		comment.total = res.data.total;
		if (params.pageNo === 1) comment.list = res.data.list;
		else comment.list = comment.list.concat(res.data.list)
	}

	function preview(ls) {
		uni.previewImage({
			urls: ls,
		});
	}

	const details = ref(null)

	function getStrategy() {
		openApi.getStrategy(id.value).then(res => {
			if (res.code === 0) {
				details.value = res.data
			}
		})
	}

	const id = ref()
	onLoad((option) => {
		id.value = option.id
		let isEnded = -1;

		getStrategy()
		getCommentPage()

	})
</script>
<style>
	page {
		background-color: #1B1829;
	}
</style>
<style scoped lang="scss">
	.reviewInput {
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 78rpx;
		background: #FFFFFF;
		border-radius: 100rpx;
		padding: 0 4rpx 0 30rpx;

		.button {
			width: 140rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background: #0D7BFA;
			border-radius: 100rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			margin-left: 20rpx;
		}

		.chat {
			width: 44rpx;
			height: 44rpx;
			margin-right: 20rpx;
		}
	}

	.review {
		width: 750rpx;
		min-height: 800rpx;
		padding: 60rpx 30rpx 260rpx;
		background: #25223B;
		border-radius: 40rpx 40rpx 0 0;


		.item {
			margin-top: 30rpx;
			border-bottom: 1rpx solid rgba(255, 255, 255, .1);

			.content {
				font-weight: 400;
				font-size: 28rpx;
				color: #EDFAFF;
				line-height: 52rpx;
			}
		}

		.tabs {
			height: 60rpx;
			line-height: 60rpx;

			view {
				height: 60rpx;
				line-height: 60rpx;
				margin-right: 42rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #EDFAFF;
				opacity: 0.6;
				transition: all .2s;
			}

			.title {
				font-weight: 600;
				font-size: 34rpx;
				color: #EDFAFF;
				opacity: 1;
			}
		}
	}

	.review-status {
		padding: 62rpx 30rpx;

		view {
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 52rpx;
		}

		view:last-child {
			color: #4E96E9;
		}
	}

	.methodTime {
		width: 690rpx;
		height: 120rpx;
		background: #25223B;
		border-radius: 16rpx;
		padding: 39rpx 20rpx;
		margin: 30rpx auto 0;

		view:first-child {
			opacity: 0.6;
		}

		view {
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}

	.details-main {
		padding: 50rpx 20rpx 40rpx;
		margin: 30rpx auto 0;
		width: 690rpx;
		background: #25223B;
		border-radius: 16rpx;

		.show {

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 16rpx;
				margin-top: 20rpx;
				margin-right: 20rpx;
			}

			&-title {
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 52rpx;
				margin-top: 50rpx;
			}
		}

		.content {
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 60rpx;
			margin-top: 40rpx;
		}

		.item {
			view:last-child {
				opacity: .7;
			}

			view {
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 70rpx;
			}
		}

		.title {
			font-weight: 600;
			font-size: 42rpx;
			color: #FFFFFF;
			background: #25223B;
			border-radius: 16rpx;
		}
	}

	.maxTitle,
	.details-time {
		padding: 0 30rpx;
	}

	.details-time {
		margin-top: 9rpx;
		font-weight: 500;
		font-size: 20rpx;
		color: #EDFAFF;
		opacity: 0.5;
	}

	.maxTitle {
		font-weight: 600;
		font-size: 42rpx;
		color: #FFFFFF;
		line-height: 52rpx;
		margin-top: 30rpx;
	}
</style>